import React from 'react'
import { useNavigate } from 'react-router-dom'
import TopNavbar from '../../components/TopNavbar'
import styles from './index.module.css'

const AppointmentNotice = () => {
  const navigate = useNavigate()

  const handleAgree = () => {
    // 同意后进入下一步，这里跳转到选择区域页面
    navigate('/register/areas')
  }

  return (
    <div>
      <TopNavbar title="预约须知" showBack onBack={() => navigate(-1)} />
      <div className={styles.noticeContainer}>
        <div className={styles.noticeTitle}>互联网医院就诊预约须知</div>
        <div className={styles.noticeContent}>
          <section className={styles.noticeSection}>
            <p className={styles.noticeText}>为保障您和他人的就诊秩序与安全，请在预约挂号前仔细阅读以下须知：</p>
            <ul className={styles.noticeList}>
              <li className={styles.noticeItem}>请如实填写就诊人信息，联系方式需保持畅通，以便及时接收就诊通知。</li>
              <li className={styles.noticeItem}>预约成功后如需取消，请在就诊前及时操作取消，避免影响后续预约资格。</li>
              <li className={styles.noticeItem}>请按时到院就诊，过号作废；具体以医院现场规则为准。</li>
              <li className={styles.noticeItem}>如涉及发热、传染病等特殊情况，请提前告知并遵循医院防控要求。</li>
            </ul>
          </section>

          <section className={styles.noticeSection}>
            <p className={styles.noticeText}>就诊当日请携带以下材料：</p>
            <ul className={styles.subList}>
              <li className={styles.subItem}>有效证件（居民身份证/护照等）；</li>
              <li className={styles.subItem}>医保凭证（如使用医保结算）；</li>
              <li className={styles.subItem}>既往病历、检查资料等有助于医生诊断的材料。</li>
            </ul>
          </section>

          <section className={styles.noticeSection}>
            <p className={styles.noticeText}>温馨提示：平台不提供任何“加号”服务，请警惕非官方渠道，谨防诈骗。</p>
          </section>

          <button className={styles.agreeButton} onClick={handleAgree}>我已阅读并同意</button>
        </div>
      </div>
    </div>
  )
}

export default AppointmentNotice
